<template>
  <div class="lines">
    <div class="lines-bar">
      <div class="lines-bar-items line-start"  :style="{height: data[0].per + '%'}"></div>
      <div class="lines-bar-items line-start"  :style="{height: data[1].per + '%'}"></div>
      <div class="lines-bar-items line-start"  :style="{height: data[2].per + '%'}"></div>
    </div>
    <div class="lines-main">
      <div class="lines-main-item">
        <div class="lines-left line-end">
          <img src="@/assets/screen/ico-money-mini.svg"/>
        </div>
        <div class="lines-right">
          <div class="lines-right-top">
            <div class="lines-right-top__dv1 lines-title">已售面积</div>
            <div class="lines-right-top__dv2 card-per-txt">同比</div>
          </div>
          <div class="lines-right-bottom">
            <div class="lines-right-top__dv1">
              <div class="card-num">
                <sys-num :value="120.2"/>
              </div>
              <div class="card-unit">万米²</div>
            </div>
            <div class="lines-right-top__dv2 card-per">
              <i class="card-per-arrow el-icon-top"></i>
              <div class="card-per-num">1.3</div>
              <div class="card-per-unit">%</div>
            </div>
          </div>
        </div>
      </div>

      <div class="lines-main-item">
        <div class="lines-left line-end">
          <img src="@/assets/screen/ico-money-mini-yellow.svg"/>
        </div>
        <div class="lines-right">
          <div class="lines-right-top">
            <div class="lines-right-top__dv1 lines-title">上市未售面积</div>
            <div class="lines-right-top__dv2 card-per-txt">同比</div>
          </div>
          <div class="lines-right-bottom">
            <div class="lines-right-top__dv1">
              <div class="card-num">
                <sys-num :value="120.2"/>
              </div>
              <div class="card-unit">万米²</div>
            </div>
            <div class="lines-right-top__dv2 card-per is-down">
              <i class="card-per-arrow el-icon-down"></i>
              <div class="card-per-num">1.3</div>
              <div class="card-per-unit">%</div>
            </div>
          </div>
        </div>
      </div>

      <div class="lines-main-item">
        <div class="lines-left line-end">
          <img src="@/assets/screen/ico-money-mini-green.svg"/>
        </div>
        <div class="lines-right">
          <div class="lines-right-top">
            <div class="lines-right-top__dv1 lines-title">存量面积</div>
            <div class="lines-right-top__dv2 card-per-txt">同比</div>
          </div>
          <div class="lines-right-bottom">
            <div class="lines-right-top__dv1">
              <div class="card-num">
                <sys-num :value="120.2"/>
              </div>
              <div class="card-unit">万米²</div>
            </div>
            <div class="lines-right-top__dv2 card-per">
              <i class="card-per-arrow el-icon-top"></i>
              <div class="card-per-num">1.3</div>
              <div class="card-per-unit">%</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import LeaderLine from 'leader-line-vue'
import bus from '@/components/common/utils/bus'

export default {
  name: 'fczt-lines',
  cnName: '房产专题-线',
  data() {
    return {
      colors: [
        ['#87c4ff', '#2588E4'],
        ['#ffcf5c', '#E1AC22'],
        ['#21c07e', '#3FE49E']
      ],
      data: [
        { label: '已售面积', value: 120.2, unit: '万米²', per: 0 },
        { label: '上市未售面积', value: 120.2, unit: '万米²', per: 0 },
        { label: '存量面积', value: 220.2, unit: '万米²', per: 0 }
      ],
      list: []
    }
  },
  methods: {
    init(data) {
      let total = 0
      total = data.map(o => o.value).reduce((a, b) => a + b)

      data.map((o, i) => {
        let per = o.value / total * 100
        o.per = per
      })

      this.$nextTick(_ => {
        setTimeout(_=> {
          this.buildLine()
        }, 400)
      })
    },
    buildLine() {
      const lefts = this.$el.querySelectorAll('.line-start')
      const rights = this.$el.querySelectorAll('.line-end')

      const lines = []
      for(let i=0; i<lefts.length; i++) {
        const color = this.colors[i%this.colors.length]
        const line = LeaderLine.setLine(lefts[i], rights[i], {color: color[1], gradient: {startColor: color[0], endColor: color[1]}, path: 'grid', size: 2, endPlug: 'arrow3', endPlugSize: 2})
        lines.push(line)
      }

      this.lines = lines
      console.info(lines)
    },
    initEvent() {

        bus.$on('on-fczt-scroll', () => {

          try {
            if(!this.lines || !this.lines.length) return
            this.lines.forEach(line => {
              line.position()
            })
          } catch (e){}

        })

    }
  },
  beforeDestroy() {
    if(this.lines) {
      this.lines.forEach(line => {
        line.remove()
      })
    }
  },
  mounted() {
    this.init(this.data)
    this.initEvent()
  }
}
</script>

<style lang="scss" scoped>
.lines {
  position: relative;
  height: 240px;
  display: flex;
  padding: 0 15px;

  &-bar {
    height: 100%;
    width: 9px;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &-items {
      width: 100%;
      flex: 1;
      justify-content: space-between;

      &:nth-child(1) {
        background: linear-gradient(180deg, #87c4ff 49%, #3680c4 76%);
      }

      &:nth-child(2) {
        background: linear-gradient(180deg, #ffcf5c 0%, #a17913 100%);
      }

      &:nth-child(3) {
        background: linear-gradient(0deg, #21c07e 34%, #1aff9c 81%);
      }
    }
  }

  &-main {
    flex: 1;
    margin-left: 74px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &-item {
      display: flex;
      justify-content: space-between;
    }
  }

  &-left {
    position: relative;
    width: 32px;
    height: 20px;
    background-image: url("~@/assets/screen/ico-light-mini.png");
    background-size: 100% 100%;
    margin-top: 15px;

    & > img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -14px;
    }
  }

  &-right {
    flex: 1;
    margin-left: 8px;

    &-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;

      &__dv1, &__dv2 {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }
    }
    &-bottom {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
  }

  .lines-title {
    text-shadow: 1px 1px 3px rgba(0, 121, 254, 1);
    color: #FFF;
    font-size: 20px;
  }

}

.card-per {
  color: #F59972;

  &.is-down {
    color: #1AFF9C;
  }

  &-txt {
    font-size: 14px;
    color: rgba(234, 254, 255, 0.7);
  }
  &-num {
    font-size: 28px;
  }
  &-unit {

  }
}

.card-num {
  font-weight: 500;
  color: #88CDFF;
  font-size: 30px;
}

.card-unit {
  color: #88CDFF;
  font-size: 14px;
}
</style>
